<template>
  <div class="disease-view">
    <el-row :gutter="20">
      <!-- 左侧传染病报卡表单 -->
      <el-col :span="16">
        <el-card class="form-card">
          <template #header>
            <div class="card-header">
              <span>传染病报卡</span>
              <div class="button-group">
                <el-button type="primary" @click="submitCard" :loading="loading">提交报卡</el-button>
                <el-button @click="previewCard">预览打印</el-button>
              </div>
            </div>
          </template>

          <el-form
            ref="cardForm"
            :model="formData"
            :rules="rules"
            label-width="120px"
            class="disease-form"
          >
            <!-- 患者基本信息 -->
            <el-divider content-position="left">患者基本信息</el-divider>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="患者姓名" prop="patientName">
                  <el-input v-model="formData.patientName" placeholder="请输入患者姓名"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="formData.gender" placeholder="请选择性别">
                    <el-option label="男" value="male"/>
                    <el-option label="女" value="female"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="年龄" prop="age">
                  <el-input-number v-model="formData.age" :min="0" :max="150"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="身份证号" prop="idCard">
                  <el-input v-model="formData.idCard" placeholder="请输入身份证号"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="formData.phone" placeholder="请输入联系电话"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="职业" prop="occupation">
                  <el-input v-model="formData.occupation" placeholder="请输入职业"/>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="现住址" prop="address">
              <el-input v-model="formData.address" placeholder="请输入现住址"/>
            </el-form-item>

            <!-- 传染病信息 -->
            <el-divider content-position="left">传染病信息</el-divider>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="疾病类型" prop="diseaseType">
                  <el-select v-model="formData.diseaseType" placeholder="请选择疾病类型" @change="handleDiseaseTypeChange">
                    <el-option label="甲类传染病" value="A"/>
                    <el-option label="乙类传染病" value="B"/>
                    <el-option label="丙类传染病" value="C"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="具体病种" prop="diseaseName">
                  <el-select v-model="formData.diseaseName" placeholder="请选择具体病种">
                    <el-option
                      v-for="disease in diseaseOptions"
                      :key="disease.value"
                      :label="disease.label"
                      :value="disease.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发病日期" prop="onsetDate">
                  <el-date-picker
                    v-model="formData.onsetDate"
                    type="date"
                    placeholder="选择发病日期"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 诊断信息 -->
            <el-divider content-position="left">诊断信息</el-divider>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="临床表现" prop="clinicalManifestations">
                  <el-input
                    v-model="formData.clinicalManifestations"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入临床表现"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实验室检查" prop="laboratoryTests">
                  <el-input
                    v-model="formData.laboratoryTests"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入实验室检查结果"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 流行病学信息 -->
            <el-divider content-position="left">流行病学信息</el-divider>
            <el-form-item label="可能感染来源" prop="infectionSource">
              <el-radio-group v-model="formData.infectionSource">
                <el-radio label="contact">密切接触者</el-radio>
                <el-radio label="food">食物感染</el-radio>
                <el-radio label="water">水源感染</el-radio>
                <el-radio label="unknown">不明</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="详细情况" prop="epidemiologicalHistory">
              <el-input
                v-model="formData.epidemiologicalHistory"
                type="textarea"
                :rows="3"
                placeholder="请输入流行病学调查详细情况"
              />
            </el-form-item>

            <!-- 报告信息 -->
            <el-divider content-position="left">报告信息</el-divider>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="报告医生" prop="reportDoctor">
                  <el-input v-model="formData.reportDoctor" placeholder="请输入报告医生姓名"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报告日期" prop="reportDate">
                  <el-date-picker
                    v-model="formData.reportDate"
                    type="date"
                    placeholder="选择报告日期"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报告单位" prop="reportUnit">
                  <el-input v-model="formData.reportUnit" placeholder="请输入报告单位"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>

      <!-- 右侧历史记录 -->
      <el-col :span="8">
        <el-card class="history-card">
          <template #header>
            <div class="card-header">
              <span>报卡历史</span>
              <el-button type="primary" @click="refreshHistory">刷新</el-button>
            </div>
          </template>

          <el-table
            :data="historyList"
            style="width: 100%"
            v-loading="loading"
            :height="tableHeight"
          >
            <el-table-column prop="reportDate" label="报告日期" width="100">
              <template #default="scope">
                {{ formatDate(scope.row.reportDate) }}
              </template>
            </el-table-column>
            <el-table-column prop="patientName" label="患者姓名" width="100"/>
            <el-table-column prop="diseaseName" label="疾病名称" min-width="120"/>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getStatusType(scope.row.status)">
                  {{ getStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  @click="viewHistory(scope.row)"
                >
                  查看
                </el-button>
                <el-button
                  link
                  type="danger"
                  v-if="scope.row.status === 'draft'"
                  @click="deleteCard(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 预览对话框 -->
    <el-dialog
      v-model="previewDialogVisible"
      title="报卡预览"
      width="70%"
    >
      <div class="preview-content">
        <!-- 预览内容 -->
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="previewDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="printCard">
            打印
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'

// 表单数据
const formData = ref({
  patientName: '',
  gender: '',
  age: 0,
  idCard: '',
  phone: '',
  occupation: '',
  address: '',
  diseaseType: '',
  diseaseName: '',
  onsetDate: '',
  clinicalManifestations: '',
  laboratoryTests: '',
  infectionSource: '',
  epidemiologicalHistory: '',
  reportDoctor: '',
  reportDate: '',
  reportUnit: ''
})

// 表单规则
const rules = {
  patientName: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
  diseaseType: [{ required: true, message: '请选择疾病类型', trigger: 'change' }],
  diseaseName: [{ required: true, message: '请选择具体病种', trigger: 'change' }],
  onsetDate: [{ required: true, message: '请选择发病日期', trigger: 'change' }],
  reportDoctor: [{ required: true, message: '请输入报告医生', trigger: 'blur' }],
  reportDate: [{ required: true, message: '请选择报告日期', trigger: 'change' }],
  reportUnit: [{ required: true, message: '请输入报告单位', trigger: 'blur' }]
}

// 疾病选项
const diseaseOptions = ref([])
const handleDiseaseTypeChange = (type: string) => {
  // 根据疾病类型加载对应的疾病选项
  switch (type) {
    case 'A':
      diseaseOptions.value = [
        { label: '鼠疫', value: 'plague' },
        { label: '霍乱', value: 'cholera' }
      ]
      break
    case 'B':
      diseaseOptions.value = [
        { label: '传染性非典型肺炎', value: 'sars' },
        { label: '艾滋病', value: 'aids' },
        { label: '病毒性肝炎', value: 'hepatitis' },
        { label: '肺结核', value: 'tuberculosis' }
      ]
      break
    case 'C':
      diseaseOptions.value = [
        { label: '流行性感冒', value: 'influenza' },
        { label: '流行性腮腺炎', value: 'mumps' },
        { label: '手足口病', value: 'hfmd' }
      ]
      break
    default:
      diseaseOptions.value = []
  }
}

// 历史记录相关
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const tableHeight = ref(500)
const historyList = ref([])

// 获取历史记录
const fetchHistory = () => {
  loading.value = true
  // TODO: 调用后端API获取数据
  setTimeout(() => {
    historyList.value = [
      {
        id: 1,
        reportDate: '2024-04-29',
        patientName: '张三',
        diseaseName: '流行性感冒',
        status: 'submitted'
      }
    ]
    loading.value = false
  }, 1000)
}

// 提交报卡
const cardForm = ref<FormInstance>()
const submitCard = async () => {
  if (!cardForm.value) return
  
  await cardForm.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      // TODO: 调用后端API提交数据
      setTimeout(() => {
        ElMessage.success('报卡提交成功')
        loading.value = false
        fetchHistory()
      }, 1000)
    } else {
      console.log('验证失败:', fields)
    }
  })
}

// 预览相关
const previewDialogVisible = ref(false)
const previewCard = () => {
  previewDialogVisible.value = true
}

const printCard = () => {
  // TODO: 实现打印功能
  console.log('打印报卡')
}

// 查看历史记录
const viewHistory = (row: any) => {
  // TODO: 实现查看历史记录详情
  console.log('查看历史记录:', row)
}

// 删除报卡
const deleteCard = (row: any) => {
  ElMessageBox.confirm(
    '确定要删除这条报卡记录吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      // TODO: 调用后端API删除数据
      ElMessage.success('删除成功')
      fetchHistory()
    })
    .catch(() => {
      // 取消删除
    })
}

// 状态相关
const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    draft: 'info',
    submitted: 'success',
    rejected: 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    draft: '草稿',
    submitted: '已提交',
    rejected: '已驳回'
  }
  return statusMap[status] || status
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  fetchHistory()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  fetchHistory()
}

// 格式化日期
const formatDate = (date: string) => {
  return new Date(date).toLocaleDateString()
}

// 页面加载时初始化
onMounted(() => {
  fetchHistory()
})
</script>

<style scoped>
.disease-view {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-group {
  display: flex;
  gap: 10px;
}

.form-card {
  margin-bottom: 20px;
}

.disease-form {
  margin-top: 20px;
}

.history-card {
  height: 100%;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.preview-content {
  min-height: 400px;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 